<div class="mat-h2">Add manual entry</div>
<form *ngIf="activity" #activityForm="ngForm">
  <mat-dialog-content class="mat-body-1">
    <div fxFill>
      <mat-form-field fxFlex="50">
        <mat-label>Name</mat-label>
        <input matInput [(ngModel)]="activity.name" name="name" required>
      </mat-form-field>
      <span fxFlex="1"></span>
      <mat-form-field fxFlex="49">
        <mat-select (selectionChange)="refreshSportsState()"
                    [(ngModel)]="activity.type"
                    placeholder="Sport Type"
                    aria-label="Sport Type"
                    name="sports"
                    required>

          <mat-optgroup *ngFor="let sportCategory of elevateSportCategories;"
                        [label]="sportCategory.label">

            <mat-option *ngFor="let sport of sportCategory.sportKeys;" [value]="sport">{{startCase(sport)}}</mat-option>
          </mat-optgroup>

        </mat-select>
      </mat-form-field>
    </div>
    <div fxLayout="row" fxLayoutAlign="start center" fxFill>
      <div fxFlex="50">
        <div class="pad-sml-b">Start time:</div>
        <div>
          <mat-form-field fxFlex="33">
            <input [(ngModel)]="startDate"
                   [matDatepicker]="datePickerFrom"
                   [max]="today"
                   name="startDate"
                   matInput
                   placeholder="Date"
                   required>
            <mat-datepicker-toggle [for]="datePickerFrom" matSuffix></mat-datepicker-toggle>
            <mat-datepicker #datePickerFrom></mat-datepicker>
          </mat-form-field>
          <span fxFlex="1"></span>
          <mat-form-field fxFlex="33">
            <mat-label>Hours (24h)</mat-label>
            <input matInput [(ngModel)]="startHours" min="0" max="23" name="startHours" type="number" required>
          </mat-form-field>
          <span fxFlex="1"></span>
          <mat-form-field fxFlex="33">
            <mat-label>Minutes</mat-label>
            <input matInput [(ngModel)]="startMinutes" min="0" max="59" name="startMinutes" type="number" required>
          </mat-form-field>
        </div>
      </div>
      <span fxFlex="1"></span>
      <div fxFlex="49">
        <div class="pad-sml-b">Duration:</div>
        <div>
          <mat-form-field fxFlex="33">
            <mat-label>Hours</mat-label>
            <input matInput [(ngModel)]="durationHours" min="0" name="durationHours" type="number" required>
          </mat-form-field>
          <span fxFlex="1"></span>
          <mat-form-field fxFlex="33">
            <mat-label>Minutes</mat-label>
            <input matInput [(ngModel)]="durationMinutes" min="0" max="59" name="durationMinutes" type="number"
                   required>
          </mat-form-field>
          <span fxFlex="1"></span>
          <mat-form-field fxFlex="32">
            <mat-label>Seconds</mat-label>
            <input matInput [(ngModel)]="durationSeconds" min="0" max="59" name="durationSeconds" type="number"
                   required>
          </mat-form-field>
        </div>
      </div>
    </div>
    <div fxFill>
      <mat-form-field fxFlex="50">
        <mat-label *ngIf="measureSystem === MeasureSystem.METRIC">Distance in kilometers (optional)</mat-label>
        <mat-label *ngIf="measureSystem === MeasureSystem.IMPERIAL">Distance in miles (optional)</mat-label>
        <input matInput [(ngModel)]="activity.stats.distance" min="0" name="distance" type="number">
      </mat-form-field>
      <span fxFlex="1"></span>
      <mat-form-field fxFlex="49">
        <mat-label *ngIf="measureSystem === MeasureSystem.METRIC">Elevation gain in meters (optional)</mat-label>
        <mat-label *ngIf="measureSystem === MeasureSystem.IMPERIAL">Elevation gain in feet (optional)</mat-label>
        <input matInput [(ngModel)]="activity.stats.elevationGain" min="0" name="elevationGain" type="number">
      </mat-form-field>
    </div>
    <mat-form-field fxFill>
      <mat-label>Heart Rate Stress Score (optional)</mat-label>
      <input matInput [(ngModel)]="activity.stats.scores.stress.hrss" min="0" name="hrss" type="number">
    </mat-form-field>
    <mat-form-field fxFill *ngIf="isRun">
      <mat-label>Running Stress Score (optional) **</mat-label>
      <input matInput [(ngModel)]="activity.stats.scores.stress.rss" min="0" name="rss" type="number">
    </mat-form-field>
    <mat-form-field fxFill *ngIf="isRide || isRun">
      <mat-label>Power Stress Score (optional) **</mat-label>
      <input matInput [(ngModel)]="activity.stats.scores.stress.pss" min="0" name="pss" type="number">
    </mat-form-field>
    <mat-form-field fxFill *ngIf="isSwim">
      <mat-label>Swimming Stress Score (optional) **</mat-label>
      <input matInput [(ngModel)]="activity.stats.scores.stress.sss" min="0" name="sss" type="number">
    </mat-form-field>
    <div class="pad-sml-b">
      <mat-checkbox [(ngModel)]="activity.trainer" name="trainer">
        Trainer (e.g. cycling home trainer, running treadmill, ...)
      </mat-checkbox>
    </div>
    <div class="pad-sml-b" *ngIf="isSwim" >
      <mat-checkbox [(ngModel)]="activity.isSwimPool" name="isSwimPool">
        Swimming Pool
      </mat-checkbox>
    </div>
    <div>
      <i>** Make sure your athlete settings are covering the given activity date with valid thresholds (Cycling FTP, running FTP and swimming FTP)</i>
    </div>
  </mat-dialog-content>
  <mat-dialog-actions>
    <button (click)="onCancel()" color="primary" mat-stroked-button>
      Cancel
    </button>
    <span fxFlex="1"></span>
    <button (click)="onSubmit()" color="primary" mat-stroked-button [disabled]="activityForm.invalid">
      Save
    </button>
  </mat-dialog-actions>
</form>
